<template>
    <div class="personal-center">
      <h2>个人中心</h2>
      <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <el-icon>
            <School />
          </el-icon>
        <div class="ce1"><router-link to="/products" >花卉商城</router-link></div>
          <el-icon>
            <ShoppingCartFull />
          </el-icon>
          <div class="ce2"><router-link to="/cart" >购物车</router-link></div>
          <el-icon>
            <ChatDotRound />
          </el-icon>
          <div class="ce3"><router-link to="/ProfilePage" >用户信息管理</router-link></div>
          <el-icon>
            <User />
          </el-icon>
          <div class="ce4"><router-link to="/" >首页</router-link></div>
      </el-aside>
    </el-container>
  </div>
      <div class="user-info">
        <img src="/public/static/images/17.jpg" alt="" style="border-radius: 50%; width: 100px;height: 100px;"><br>
        <el-button><router-link to="/login" >登录</router-link></el-button>
        <el-button><router-link to="/register" >注册</router-link></el-button>
        <p>用户名：{{ username }}</p >
        <p>联系方式：{{ contact }}</p >
         
      </div>
      <div class="order-history">
        <h3>订单历史</h3>
        <ul>
          <li v-for="order in orders" :key="order.id">
            <p>订单编号：{{ order.id }}</p >
            <p>订单状态：{{ order.status }}</p >
            <p>订单日期：{{ order.date }}</p >
            <p>商品详情：{{ order.items }}</p >
          </li>
        </ul>
      </div>
      <div class="address-book">
        <h3>地址簿</h3>
        <ul>
          <li v-for="address in addresses" :key="address.id">
            <p>收件人：{{ address.recipient }}</p >
            <p>地址：{{ address.address }}</p >
            <p>联系电话：{{ address.phone }}</p >
            <button @click="editAddress(address.id)">编辑</button>
            <button @click="deleteAddress(address.id)">删除</button>
          </li>
        </ul>
        <button @click="addAddress">添加地址</button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        username: '瑜归',
        contact: '18376673521',
        orders: [
         
          {
            id: 1,
            status: '已发货',
            date: '2024-11-02',
            items: '玫瑰一束，百合三朵',
          },
     
        ],
        addresses: [
          
          {
            id: 1,
            recipient: '瑜归',
            address: '湖南省长沙市',
            phone: '18376673923',
          },
        
        ],
      };
    },
    methods: {
      editAddress(addressId) {
        
        console.log(`编辑地址 ${addressId}`);
      },
      deleteAddress(addressId) {
        
        this.addresses = this.addresses.filter(address => address.id!== addressId);
      },
      addAddress() {
        
        console.log('添加地址');
      },
    },
  };
  </script>
  
  <style scoped>
  .personal-center {
    padding: 20px;
  }
  .user-info  {
    margin-top: -300px;
    margin-bottom: 10px;
  }

  .address-book h3 {
    margin-top: 20px;
  }
  .address-book li button {
    margin-left: 10px;
  }
  .common-layout {
  margin-top: 10px;
  display: flex;
}

.ce1 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.ce2 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.ce3 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.ce4 {
  width: 80px;
  color: #BEBEBE;
  margin-top: -23px;
  margin-left: 65px;
}

.el-icon {
  width: 20px;
  height: 20px;
  margin-top: 20px;
  margin-left: -80px;
}

.el-aside {
  background-color: #FFD9EC;
  height: 325px;
}
.el-button{
  background-color: #ffaad5;
  margin-left: 55px;
}
  </style>